<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ES基础</title>
</head>
<style>
    .item{
        width: 200px;
        height:50px;
    }
</style>
<body>
    <h2>切换变换颜色</h2>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <script>
        /* 
            let 关键字，块级作用域
            不允许重复声明
        */
       //例子：点击每个div背景色变色
       document.addEventListener('DOMContentLoaded', function() {
        let items = document.querySelectorAll('div')
        for(let i = 0; i< items.length; i++) {
            items[i].addEventListener('click', function() {
                items[i].style.background = 'pink';
            })
        }
       })

       /* 
        const 关键字
        不允许重复，
        声明必须赋初始值
        值不允许修改，注意：对象和数组修改不会触发const 错误
       */
      const arr = [1,3,4]
      arr.push(5)
      const obj = {
        uname: 'jack',
        age: 18
      }
      obj.uname = 'jjack'
      /* 
      变量的解构赋值
      */
     const [a,b,c,d=9] = arr
     const {uname, age} = obj
     /* 
      模板字符串
     */
    // console.log('你好， ' + uname);
    // console.log(`你好，${uname}`);
    /* 
     简化对象写法
     */
    //创建对象
    const object = {
    a,
    b,
    uname
    }
    // console.log(object)
    /* 
    箭头函数
    */
   function fn (params1,params2) {

   }
   let fn1 = (param1,param2) => {
     console.log(this, 'fn1') //指向window
   }

   let object1 = {
     a: 20,
     fn: () => {
        console.log(this, 'object--fn') //指向window
     },
     getA() {
        let fn3 = ()=> {
            console.log(this, 'object--fn3') //指向object1
            return this.a;
        }
        fn3()
     }
   }
   fn1();
   object1.fn();
   object1.getA();

   /* 
   rest 参数 形参
   获取参数，将接收的参数，序列的转化为一个数组
   应用场景：参数不确定的函数
   */
  function fn4(a,b,c,...args) {
    console.log(args);
  }
  fn4(1,2,3,4)
  //求和
  function fn5(...args){
     let sum = args.reduce((pre, cur) => pre + cur, 0)
     return sum
  }
  console.log(fn5(1,2,3,4))
  /* 
  spread扩展运算符 ...，好比rest 逆运算，将数组解包
  实参
  */
 function fn6(a,b,c) {}

 let arr1 = ['red', 'green', 'pink'];
 fn6(...arr1)
 let arr11 = ['red', 'green', 'pink'];

 //数组合并
 let arr2 = ['black']
 let arr3 = [...arr1,...arr2]
 //数组克隆
 let arr4 = [...arr3]
 //对象的合并
 let obj1 = {
    name: 'jjj'
 }
 let obj2 = {
    name: 'kkk'
 }
 let obj3 = {...obj1, ...obj2}
 console.log(obj3, 'obj3');
/* 
 object.assign
 对象合并
*/
// let obj4 = Object.assign(...obj1, ...obj2)

</script>
</body>
</html>